<template>
  <section class="basic">
    <img src="../assets/img/mubu.jpg" class="img">
    <el-row class="title">
      <el-col :span="24" style="text-align:center">2019年宁波高松电子有限公司新春团拜会</el-col>
    </el-row>
    <el-row class="prize" v-show="priceClick">
      <el-col :span="24" class="_price">
        <el-button @click="price('three')" class="priceButton">三</el-button>
      </el-col>
      <el-col :span="24" class="_price">
        <el-button @click="price('two')" class="priceButton">二</el-button>
      </el-col>
      <el-col :span="24" class="_price">
        <el-button @click="price('one')" class="priceButton">一</el-button>
      </el-col>
      <el-col :span="24" class="_price">
        <el-button @click="price('lucky')" class="priceButton">投票幸运奖</el-button>
      </el-col>
      <el-col :span="24" class="_price">
        <el-button @click="rank()" class="priceButton">最终排名</el-button>
      </el-col>
    </el-row>

    <!-- 沉底 -->
    <el-row class="control" :span="8" :offset="8" v-show="one">
      <el-button type="success" @click="start('one')" :disabled="beginC">开始</el-button>
      <el-button type="warning" @click="end('one')" :disabled="endC">结束</el-button>
    </el-row>
    <el-row class="control" :span="8" :offset="8" v-show="two">
      <el-button type="success" @click="start('two')" :disabled="beginC">开始</el-button>
      <el-button type="warning" @click="end('two')" :disabled="endC">结束</el-button>
    </el-row>
    <el-row class="control" :span="8" :offset="8" v-show="three">
      <el-button type="success" @click="start('three')" :disabled="beginC">开始</el-button>
      <el-button type="warning" @click="end('three')" :disabled="endC">结束</el-button>
    </el-row>
    <el-row class="control" :span="8" :offset="8" v-show="lucky">
      <el-button type="success" @click="start('lucky')" :disabled="beginC">开始</el-button>
      <el-button type="warning" @click="end('lucky')" :disabled="endC">结束</el-button>
    </el-row>
    <el-row>
      <div class="list"></div>
    </el-row>
    <!-- 抽奖名单 -->
    <el-row class="nameList">
      <!-- 一等奖 -->
      <el-col :span="24" class="jobNumberList" v-show="onePrice">
        <span>{{onePrice1}}</span>
      </el-col>
      <el-col :span="24" class="jobNumberList" v-show="onePrice">
        <span>{{onePriceName1}}</span>
      </el-col>
      <!-- 二等奖 -->
      <el-col :span="12" class="jobNumberList" v-show="twoPrice">
        <span>{{twoPrice1}}</span>
      </el-col>
      <el-col :span="12" class="jobNumberList" v-show="twoPrice">
        <span>{{twoPrice2}}</span>
      </el-col>
      <el-col :span="12" class="jobNumberList" v-show="twoPrice">
        <span>{{twoPriceName1}}</span>
      </el-col>
      <el-col :span="12" class="jobNumberList" v-show="twoPrice">
        <span>{{twoPriceName2}}</span>
      </el-col>
      <!-- 三等奖 -->
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePrice1}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePrice2}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePrice3}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePriceName1}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePriceName2}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="threePrice">
        <span>{{threePriceName3}}</span>
      </el-col>
      <!-- 幸运奖 -->
      <el-col :span="24" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice1}}</span>
      </el-col>
      <el-col :span="24" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPriceName1}}</span>
      </el-col>
      <!-- <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice1}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice2}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice3}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice4}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice5}}</span>
      </el-col>
      <el-col :span="8" class="jobNumberList" v-show="luckyPrice">
        <span>{{luckyPrice6}}</span>
      </el-col>-->
    </el-row>
    <!-- 音频 -->
    <el-row>
      <audio src="../assets/music/kaishi.wav" preload="auto" id="kaishi" hidden></audio>
    </el-row>
    <el-row>
      <audio src="../assets/music/zanting.wav" preload="auto" hidden id="zanting"></audio>
    </el-row>
    <!--  -->
  </section>
</template>
<script>
import { getPerson, drawPrize } from "../api/nianhui.js";
export default {
  data() {
    return {
      one: false,
      two: false,
      three: false,
      lucky: false,
      onePrice: false,
      twoPrice: false,
      threePrice: false,
      luckyPrice: false,
      priceClick: true,
      onePrice1: "",
      onePriceName1: "",
      twoPrice1: "",
      twoPrice2: "",
      twoPriceName1: "",
      twoPriceName2: "",
      threePrice1: "",
      threePrice2: "",
      threePrice3: "",
      threePriceName1: "",
      threePriceName2: "",
      threePriceName3: "",
      // threePrice1: "",
      luckyPrice1: "",
      luckyPrice2: "",
      luckyPrice3: "",
      luckyPrice4: "",
      luckyPrice5: "",
      luckyPrice6: "",
      luckyPriceName1: "",
      beginC: false,
      endC: false,
      // 名单
      List: [
        { name: "丁总", jobNumer: "A0001" },
        { name: "茹总", jobNumer: "B0001" },
        { name: "干文学", jobNumer: "B0002" },
        { name: "孙魏", jobNumer: "B0466" },
        { name: "谭庆", jobNumer: "B0051" },
        { name: "朱红", jobNumer: "B0267" },
        { name: "刘晓龙", jobNumer: "B0262" },
        { name: "马复苗", jobNumer: "B0010" },
        { name: "谢发忠", jobNumer: "B0004" },
        { name: "马玉涛", jobNumer: "B0225" },
        { name: "周坤文", jobNumer: "B0020" },
        { name: "陈冬梅", jobNumer: "B0030" },
        { name: "蔡理民", jobNumer: "B0078" },
        { name: "干春杰", jobNumer: "C0010" },
        { name: "戴宏国", jobNumer: "C0023" },
        { name: "孙金杰", jobNumer: "A0029" },
        { name: "施永杰", jobNumer: "A0298" },
        { name: "夏荣波", jobNumer: "A0565" },
        { name: "邓莉萍", jobNumer: "RS00142" },
        { name: "高爱珍", jobNumer: "S0008" },
        { name: "龚善武", jobNumer: "S0129" },
        { name: "张乐根", jobNumer: "IT00020" },
        { name: "周小攀", jobNumer: "IT0017" },
        { name: "郑会群", jobNumer: "Q1529" },
        { name: "刘蕾", jobNumer: "Q0942" },
        { name: "陈德安", jobNumer: "M0971" },
        { name: "朱力", jobNumer: "M1068" },
        { name: "吴轶", jobNumer: "M1049" },
        { name: "周杨", jobNumer: "M0181" },
        { name: "王红春", jobNumer: "Y0402" },
        { name: "童晓琴", jobNumer: "Y0032" },
        { name: "彭敏", jobNumer: "Y0150" },
        { name: "王宇航", jobNumer: "Y0003" },
        { name: "周晓", jobNumer: "Y0383" },
        { name: "陈昌顺", jobNumer: "R66083" },
        { name: "欧阳建川", jobNumer: "R613017" },
        { name: "高春水", jobNumer: "R60213" },
        { name: "张奎", jobNumer: "G0001" },
        { name: "刘玉锋", jobNumer: "G1092" },
        { name: "袁剑涛", jobNumer: "G0096" },
        { name: "韩忠良", jobNumer: "G0543" },
        { name: "李远兵", jobNumer: "R34543" },
        { name: "李富民", jobNumer: "R304542" },
        { name: "凌雁冰", jobNumer: "R512552" },
        { name: "文艺", jobNumer: "R000013" },
        { name: "马翔", jobNumer: "R16215" },
        { name: "洪文宝", jobNumer: "VR80001" },
        { name: "贺姜平", jobNumer: "VR80002" },
        { name: "冯光浩", jobNumer: "A0006" }
      ],
      person: [],
      index: [],
      timer: null
      // playFlag: false
    };
  },
  methods: {
    price(type) {
      this.one = false;
      this.two = false;
      this.three = false;
      this.lucky = false;
      this.onePrice = false;
      this.twoPrice = false;
      this.threePrice = false;
      this.luckyPrice = false;
      if (type === "one") {
        this.one = true;
      } else if (type === "two") {
        this.two = true;
      } else if (type === "three") {
        this.three = true;
      } else if (type === "lucky") {
        this.lucky = true;
      }
    },
    start(type) {
      // 声音开始播放
      var audio1 = document.getElementById("kaishi");
      var audio2 = document.getElementById("zanting");
      this.beginC = true;
      this.endC = false;
      if (audio1 !== null) {
        audio1.currentTime = 0;
        audio1.play();
      }
      if (audio2 !== null) {
        audio2.pause();
      }
      this.onePrice = false;
      this.twoPrice = false;
      this.threePrice = false;
      this.luckyPrice = false;
      this.priceClick = false;
      let _this = this;
      let listLength = _this.List.length;
      let personLength = _this.person.length;
      _this.timer = null;
      let _arr = [];

      if (type === "one") {
        _this.onePrice = true;
        _this.timer = setInterval(() => {
          let winner = parseInt(Math.random() * listLength);
          _this.onePrice1 = _this.List[winner].jobNumber;
          _this.onePriceName1 = _this.List[winner].name;
          _this.index = [];
          _this.index.push(winner);
        }, 20);
      } else if (type === "two") {
        _this.twoPrice = true;
        _this.timer = setInterval(() => {
          _arr = [];
          _this.index = [];
          // 随机生成两个不重复的随机数
          while (_arr.length < 2) {
            let winner = parseInt(Math.random() * listLength);
            // console.log(winner);
            if (_arr.indexOf(winner) === -1) {
              _arr.push(winner);
              _this.index.push(winner);
            }
          }
          // console.log(_arr);
          _this.twoPrice1 = _this.List[_arr[0]].jobNumber;
          _this.twoPrice2 = _this.List[_arr[1]].jobNumber;
          _this.twoPriceName1 = _this.List[_arr[0]].name;
          _this.twoPriceName2 = _this.List[_arr[1]].name;
        }, 20);
      } else if (type === "three") {
        _this.threePrice = true;
        _this.timer = setInterval(() => {
          _arr = [];
          _this.index = [];
          // 随机生成三个不重复的随机数
          while (_arr.length < 3) {
            let winner = parseInt(Math.random() * listLength);
            if (_arr.indexOf(winner) === -1) {
              _arr.push(winner);
              _this.index.push(winner);
            }
          }
          _this.threePrice1 = _this.List[_arr[0]].jobNumber;
          _this.threePrice2 = _this.List[_arr[1]].jobNumber;
          _this.threePrice3 = _this.List[_arr[2]].jobNumber;
          _this.threePriceName1 = _this.List[_arr[0]].name;
          _this.threePriceName2 = _this.List[_arr[1]].name;
          _this.threePriceName3 = _this.List[_arr[2]].name;
        }, 50);
      } else if (type === "lucky") {
        _this.luckyPrice = true;
        _this.timer = setInterval(() => {
          let winner = parseInt(Math.random() * personLength);
          _this.luckyPrice1 = _this.person[winner].jobNumber;
          _this.luckyPriceName1 = _this.person[winner].name;
          _this.index = [];
          _this.index.push(winner);
        }, 50);
        // _this.luckyPrice = true;
        // _this.timer = setInterval(() => {
        //   _arr = [];
        //   _this.index = [];
        //   // 随机生成六个不重复的随机数
        //   while (_arr.length < 6) {
        //     let winner = parseInt(Math.random() * listLength);
        //     if (_arr.indexOf(winner) === -1) {
        //       _arr.push(winner);
        //       _this.index.push(winner);
        //     }
        //   }
        //   _this.luckyPrice1 = _this.List[_arr[0]].jobNumber;
        //   _this.luckyPrice2 = _this.List[_arr[1]].jobNumber;
        //   _this.luckyPrice3 = _this.List[_arr[2]].jobNumber;
        //   _this.luckyPrice4 = _this.List[_arr[3]].jobNumber;
        //   _this.luckyPrice5 = _this.List[_arr[4]].jobNumber;
        //   _this.luckyPrice6 = _this.List[_arr[5]].jobNumber;
        // }, 200);
      }
    },
    end(type) {
      // 声音开始结束
      this.beginC = false;
      this.endC = true;
      var audio1 = document.getElementById("kaishi");
      var audio2 = document.getElementById("zanting");
      if (audio1 !== null) {
        audio1.pause();
      }
      if (audio2 !== null) {
        audio2.currentTime = 0;
        audio2.play();
      }
      clearInterval(this.timer);
      this.timer = null;
      this.priceClick = true;
      // console.log(this.List, this.index);
      if (type !== "lucky") {
        for (let i = 0; i < this.index.length; i++) {
          // 记录下数据,并从人员名单中删除该中奖观众
          drawPrize(
            this.List[this.index[i]].name,
            this.List[this.index[i]].jobNumber,
            type
          ).then(res => {
            if (res) {
              console.log("记录完成");
              // 重新获取名单
              this.getData();
            }
          });
          // this.List.splice(this.index[i], 1);
        }
      }
      if (type === "one") {
        // 从数组中删除这个人
        this.one = false;
      } else if (type === "two") {
        this.two = false;
      } else if (type === "three") {
        this.three = false;
      } else if (type === "lucky") {
        this.lucky = false;
      }
    },
    getData() {
      getPerson().then(res => {
        if (res) {
          this.personNumber = "";
          this.List = res.list;
          this.person = res.msg;
          /**
           * 检查名单数量
           */
        } else {
          //
          // this.$message.error("暂无抽奖人员名单");
        }
      });
    },
    rank() {
      this.$router.push({ path: "/final" });
    }
  },
  mounted() {
    //  获取LIST名单
    // var _this = this;
    this.getData();
  }
};
</script>
<style scoped>
.basic {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  background-size: cover;
  display: flex;
  background: -webkit-radial-gradient(
    #dd2324,
    #b91f21,
    #a81d22
  ); /* Safari 5.1 - 6.0 */
}
.control {
  position: absolute;
  margin: auto auto;
  left: 45%;
  bottom: 8rem;
}
.title {
  position: absolute;
  margin: auto;
  width: 80%;
  left: 10%;
  top: 5%;
  font-family: "华文行楷", Georgia, Serif;
  color: rgb(241, 208, 16);
  font-size: 5rem;
}
.basic .prize {
  position: absolute;
  margin: auto auto;
  left: 1rem;
  bottom: 50%;
}
.nameList {
  position: absolute;
  margin: auto auto;
  width: 80%;
  left: 10%;
  top: 35%;
  font-size: 7rem;
}
.nameList span {
  color: rgb(241, 208, 16);
}
.priceButton {
  background-color: #fff;
}
.priceButton:hover {
  background-color: #a81d22;
  color: #fff;
}
.img {
  width: 100%;
  margin-top: -10rem;
}
._price {
  margin-top: 1rem;
}
.jobNumberList {
  text-align: center;
  color: black;
}
/* .list {
  position: absolute;
  top: 50%;
  width: 10rem;
  height: 4rem;
  background-color: aliceblue;
  border-radius: 20rem;
} */
</style>